前端学习札记

学习工作中遇到的问题，和容易忘记的零碎知识，部分为摘抄，如若侵权，请告知。

HTML篇

CSS篇

box-sizing：

设置盒子模型为标准模式或者IE模式。属性有三个：
1.content-box：默认值，border和padding不计算到width。
2.padding-box：padding算入width。
3.border-box：border和padding都会算入width。
4.另外标准模式下，背景其实是包括边框的，可以使用background-clip来设置。
5.同理background-origin也可以设置背景图片的位置。
6.IE盒子模型会改变

四个边框阴影

边框阴影也可以设置透明度，这样看起来会很美观，而且还会解决没透明度会出现阴影和背景色一样的情况。

 box-shadow: -1px 0 2px rgb(000, 000, 000, 0.2),
      0 0 0 rgb(000, 000, 000, 0.2),
      1px 0 2px rgb(000, 000, 000, 0.2), 
      0 2px 4px rgb(000, 000, 000, 0.2);

浏览器渲染原理

(不同浏览器大同小异)
1.一般以8K单位接受请求的内容，并解析其中的HTML构建DOM Tree(display:none的元素不会渲染)。CSS构建CSS Rule Tree。
2.DOM，CSS合并生成Render Tree。根据CSS2标准，tree中每个节点都成为box，具有width，height，margin，padding等属性。
3.浏览器根据Render Tree可以知道网页中的节点，各节点的关系或样式或位置。最后通过显卡绘制出来。

回流(reflow)和重绘(repaint)

回流：Render Tree中一些元素尺寸布局等发生改变，页面需要重新构建，页面需要执行reflow操作。
重绘：Render Tree中一些元素外观一类的属性发生改变，不会影响布局，这会触发repaint。

减少reflow

Dom Tree的每个节点都有reflow方法，一个节点的reflow可能触发其他节点的reflow，reflow不可避免，难以预测。
1.将多次的样式操作合并到一次操作，可以新建一个类选择器，将这些样式添加进来。
2.display:none不在Tree中，修改属性不会触发回流，可以先隐藏再操作，再显示。
3.DocumentFragment缓存操作，这个还没听过。
4.position设置为absolute或fixed。这样改变CSS会大大减少reflow。
5.不要使用table布局。
6.避免不必要的复杂CSS选择器，尤其是后代选择器！

css3动画

/*css3动画可以在css中编写*/
/*1.设置*/
@keyframes animateName {
 /*animate here,0%可以设置动画的初始状态*/
 0%{
    transform: translateX(0px);
    transform: rotate(0deg);
    opacity: 1;
 }
 50%{
    /*...css code here*/
 }
 100%{
    /*...css code here*/
 }
}
/*2.使用*/
.someEle{
/*缩写： 动画名称 执行时间 延迟时间*/
 animation: animateName 0.5s 1.5s;
/*全称
animation-name: ;
animation-duration: ;
animation-delay: ;
用来保持动画处于最后一帧的状态
animation-fill-mode: forwards;
*/
}

JavaScript篇

判断变量是不是数组：

(注意跨frame实例化对象不共享原型)

var a=[];
a.constructor===Array;
a instanceof Array ===true;

instanceof

用法：(object instanceof constructor)
用来检验constructor.prototype是否存在于参数object的原型链上，用于检测对象类型

javascript继承/原型/工厂模式

1.工厂模式

抽象了创建对象的过程,解决了创建多个相似对象的问题

对于对象识别问题并没有解决

   function createPerson(name,age) {
     var obj = {};
     obj.name=name;
     obj.age=age;
     obj.info=function() {
       // ...code here
     }
     return obj;
   }

2.原型

我们创建的每个函数都有prototype(原型)属性,它是一个指针,指向一个对象(原型对象),它可以使所有对象实例共享属性和方法
原型对象初始会默认取得constructor属性,它是一个指针,指向原型属性所在的函数

3.几种继承方法

原型链继承：此时属性有点像java中的静态属性,没有个体之分

    function Super(name) {
         this.name=name;
       }
    Sub.prototype = new Super();
    Sub.prototype.constructor = Sub;

借用构造函数：可以将属性变为实例属性,但是函数复用捉襟见肘

   function Super(name) {
     this.name=name;
   }
   function Sub(name) {
     Super.call(this,name);
   }

组合继承：使用原型实现方法复用,借用构造函数实现每个实例有自己的属性

原型式继承：对传入的对象进行了浅复制,包含引用类型值得属性会共享相应的值

   function object(o) {
     function F() {}
     F.prototype=o;
     return new F();
   }
   // ES5新增Object.create()方法规范了原型式继承

寄生式继承：组合继承会两次超类型构造函数,一次是创建子类型原型(new),一次是在子类型构造函数内部(call),最终实例上的属性会屏蔽原型中的同名属性,这是可以用寄生式继承解决：通过借用构造函数继承属性,通过原型链的混成形式来继承方法

   function inheritPrototype(subType,superType){
     var prototype = Object(subType.prototype); //创建对象
     prototype.constructor = subType;           //增强对象
     subType.prototype = prototype;             //指定对象
   }   
   function SuperType(name) {
         this.name=name;
       }
       function SubType(name,age) {
         Super.call(this,name);
         this.age = age
       }
       inheritPrototype(SubType,SuperType);
   // 这个例子的高效率体现在只调用了一次SuperType构造函数,同时原型链还能保持不变,可以正常的使用instanceof呵呵isPrototypeOf()

this作用域。

this对象是在运行时基于函数的执行环境绑定的,全局函数中为window,被作为某个对象的方法调用时,this等于那个对象
每个函数执行时都会自动取得两个特殊变量：argumens和this,内部函数搜索这两个变量时只会搜索到其活动对象位置,所以不可能直接访问外部函数中的这两个变量
把外部作用域中的this对象保存在一个闭包能够访问的变量里,就可以让闭包访问该对象了

    var obj = {
    name:"inner",
    getName:function() {
        // 这里的this指向obj
        // 保存this
        var that = this;
      return function() {
          // 这里的this不能指向外部函数中的this
          // console.log(this.name)
          console.log(that.name);
      }
    }
    }

箭头函数的this指向当前上下文，而且使用bind/apply无效，在Vue中也可能会导致一些错误，React中有时则可以很方便的绑定组件中的this

new的意思

1.创建一个新对象
2.将这个新对象的__proto__指向构造函数的prototype(即将新创建对象的隐式原型指向构造函数的显示原型)。
3.将构造函数的this指向这个新创建的对象(即将this指向这个新对象)。
4.无返回值或非对象返回则返回这个对象，否则返回这个返回的新对象。

typeof

避免XSS

(可以理解为一种js注入，既然是注入就需要对输入进行规范)
XSS方式：a.注入出现在URL中，然后又随服务器返回到浏览器b.这个注入会存储在服务端。
1.避免使用eval，new Function方法可接受字符串形式的js代码。
2.cookie的httpOnly可以阻止js读取cookie。
3.注意innerHTML,document.write方法。
4.对用户输入的数据进行HTML Entity编码。

取消冒泡

event.cancleBubble=true;这种相当于全局取消事件冒泡。

ajax实现的过程(原生的js)

// 创建对象
var http = new XMLHttpRequest();
// 设置请求详情
http.open(method, url, true);
// 发送
http.send();
// 通过事件判断请求处理结果,处理返回的数据
http.onreadystatechange = function () {
    if (http.readyState == 4 && http.status == 200) {
            // http.responseText为返回的字符串
            // code here
        
        }
    }

入口函数

window.onload=function(){...}和$(document).ready(function(){...})
1.js中需要等待图片等所有元素加载完毕才会执行，jq中则是等待DOM结构绘制完成即可执行。
2.js这方法只能执行一个，jq编写多个入口函数，多个都会执行。
3.如果需要等待所有元素加载完毕则使用$(window).load(function(){...}),这个相当于js中的window.onload。
4.一些问题：jq3版本js入口函数总是会先执行。jq2版本是正常顺序，3版本好像在网页资源很少的时候js的入口函数就会先执行。
5.jq可简写为$(function(){...})。

promise

首先会执行Promise里的方法，方法里会有一个resolve和result，相当于两个指针，执行到一个就会触发相应的then或者是catch，then里是一个函数，接受的参数通过resolve传入。

onmouseover/enter

onmouseover:移动到子元素也会继续触发over。
onmouseenter:子元素不会影响。

前端性能的优化

1.避免全局查找，全局查找需要涉及作用域链上的查找。
2.避免使用with一句，with会创建自己的作用域，会增加执行代码的作用域链的长度，with语句中的代码的执行时间肯定会比外面的代码的执行时间长。

function test(){
  with(document.body){
  alert(tagName);
  innerHtml="Hello";
  }
}
function test(){
  var body=document.body;
  alert(body.tagName);
  body.innerHtml="Hello";
  }
}

3.几个算法复杂度的例子
O(1):var value=10;arr[1];
O(log n):二分查找，总的执行时间和值得数量有关，但并不一定要获得的每个值。
O(n):遍历一个数组中的元素。
O(n^2):每个值至少需要获取n次，例如插入排序。
思路：可以将多次使用的一个复杂度高点的变量设为局部变量。
4.优化循环：
减值迭代：
优化循环体
简化终止条件：因为每次循环都会计算终止条件，然后和他比较。
使用后测试循环（do-while）：

5.展开循环：循环次数不多可以展开，减少了终止条件的判断。
思路：Duff装置，将所有循环按每八个一起执行。

var iterations = Math.floor(values.length/8);
var leftover = values.length&8;//处理多余的几个元素
var i=0;
/*用来处理多出来的几个元素*/
if(leftover>0){
  do{
  process(values[i++]);
  }while(--leftover>0);
}
/*余下数量为8的倍数，不用担心下标越界*/
do{
  process(values[i++]);
  //...以下省略其余7个循环体
}while(--iterations>0);
/*简单的数组循环测试发现其实要慢很多*/

6.避免双重解释:Function(),eval();
7.原生方法快点，switch语句快点，位运算符快点，var语句可以合并，迭代可以arr[i++]，只用一条语句创建数组或对象。
8.减少js和DOM的交互，可以判断event.target的nodeName来绑定事件，利用事件冒泡的机制减少循环绑定事件。
9.访问集合元素时使用局部变量，这样不用反复遍历作用域链？所以稍微快点，过多使用hover也会影响性能

onfoucus没有冒泡

可以使用onfoucusin。

浅拷贝深拷贝

参考变量的引用，深拷贝可以先创建一个空容器，然后向其中赋值实现拷贝。

node.js

npm -S和npm -D

-S --save，
-D 是 --save-dev

2.-save和save-dev可以省掉你手动修改package.json文件的步骤。

npm install module-name -save 自动把模块和版本号添加到dependencies部分，一般是项目开发到上线都会用到的包
npm install module-name -save-dve 自动把模块和版本号添加到devDependencies部分，一般是工具安装的使用

react跨域cookie

服务器端:

app.all('*', function (req, res, next) {
  res.header("Access-Control-Allow-Origin", req.headers.origin); //需要显示设置来源
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
  res.header("Access-Control-Allow-Credentials", true); //带cookies7     res.header("Content-Type", "application/json;charset=utf-8");
  next();
});

客户端使用axios:

 var params = new URLSearchParams();
      params.append('username', "");
      params.append('password', "");
      params.append('nickname', "");
      axios({
          method: "post",
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8',
          },
          url: "http://localhost:3000/users/register",
          data: params
        }).then().catch()

这样设置，就可以在请求时加上cookie了